<template>
  <div class="userDetailContaions">
    <div class="img">
        <img :src="userStore.user.img" alt="">
        <!-- <el-button @click="editHeader" class="eidtmr">更换头像</el-button> -->
        <el-upload
    ref="upload"
    class="upload-demo"
    action="http://127.0.0.1/file/up"
    :limit="1"
    :multiple="false"
    :with-credentials="true"
    :on-success="uploudSuccess"
    :before-upload="beforeUpload"
    :auto-upload="true"
  ><template #trigger>
      <el-button type="info" round  class="eidtmr">更换头像</el-button>
    </template>
    <template #tip>
      <div class="el-upload__tip">
        jpg/png 最大支持3MB.
      </div>
    </template>
  </el-upload>

    </div>
    
    <div class="detail">
        <span @click="editN()">
            <el-input v-model="userStore.user.username" v-if="editName" @blur="okName" ref="nameInput" class="inp" ></el-input>
        <h1  v-if="!editName">{{ userStore.user.username }}</h1>
        </span>
        <span @click="editG()" >
            <el-input v-model="userStore.user.signature" v-if="editQM" @blur="okQM" ref="QMInput"  class="inp"></el-input>
        <h3 v-if="!editQM">{{ userStore.user.signature }}</h3>
        </span>

        
    </div>
  </div>
</template>

<script setup>
import {defineOptions,ref,nextTick} from 'vue';
import { useUserStore } from '../../stores/moudles/user';
import { changeNameService,changeSignatureService } from '@/api/user.js'
import { ElMessage } from 'element-plus';
const userStore = useUserStore();
const editName = ref(false);
const editQM = ref(false)
let oldName = '';
let oldSignature = '';
//更换头像成功回调
const uploudSuccess = (resp,file)=>{
    if(resp.code !== 200){
        return ElMessage.error(resp.msg);
    }

    userStore.user.img = resp.data;
    ElMessage.success(resp.msg);
}
//上传文件前钩子
const beforeUpload = (file) =>{
    console.log(file)
    let fileName = file.name;
    console.log(fileName)
    let suffix = fileName.substr(fileName.lastIndexOf('.')+1);
    console.log(suffix)
    if(file.size/(1024*1024) >= 3){
        ElMessage.error("文件超出限制")
        console.log('文件超出限制')
        return false;
    }else if(suffix !== 'jpg' && suffix !== 'png' && suffix !== 'JPG' && suffix !== 'PNG'){
        ElMessage.error("文件非法")
        console.log('文件非法')
        return false;
    }
    return true;
}

// name输入框ref
const nameInput = ref()
const QMInput = ref()
//name编辑
const editN =()=>{
    editName.value = true;
   
    nextTick(() => {
        nameInput.value.focus();
        })
    oldName = userStore.user.username;    

}
//签名编辑
const editG =()=>{
    editQM.value = true;
    nextTick(() => {
        QMInput.value.focus();
        })
    oldSignature = userStore.user.signature;  
}
//确认name
const okName = async ()=>{
    editName.value = false;
    if(oldName != userStore.user.username){
        //name更改发送请求
       const {data:res} = await changeNameService({"name":userStore.user.username});
       if(res.code === 200){
        ElMessage.success(res.msg);
       }else{
        userStore.setUserName(oldName);
        ElMessage.error(res.msg);
       }     
    }
}
//确认签名
const okQM = async ()=>{
    editQM.value = false;
    if(oldSignature != userStore.user.signature){
        const {data:res} = await changeSignatureService({"signature":userStore.user.signature});
       if(res.code === 200){
        ElMessage.success(res.msg);
       }else{
        userStore.setSignature(oldSignature);
        ElMessage.error(res.msg);
       }  
    }
}
defineOptions({
    name:'userDetail'
})
</script>

<style lang="less" scoped>
    .userDetailContaions{
        // background-color: pink;
        height: 100%;
        display: flex;
        // justify-content: space-evenly;
        justify-content: center;
        align-items: center;
        .inp{
            background-color: #999;
        }
        .eidtmr{
            width: 160px;
            opacity: 0.7;
        }
        .img{
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            img{

            width: 250px;
            height: 250px;
            margin-bottom: 25px;
        }
        }
        .detail{
            width: 250px;
            height: 250px;
            margin-left: 50px;
            // background-color: aqua;
            display: flex;
            flex-direction: column;
            justify-content:space-around;
        }
        
    }
</style>